<template :v-slot:`${slotName}`>
    <div class="static-table-content">
        <div class="filter-section">
            <span class="title fl">{{title}}统计</span>
            <el-select class="select fl" v-model="selectValue" filterable clearable placeholder="请选择" size="mini">
                <el-option
                        v-for="item in dataOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div id="bar-section"></div>
        <SimpleStaticTableList class="table-section" ref="tableSection"></SimpleStaticTableList>
    </div>
</template>

<script>
    import SimpleStaticTableList from "@/components/SimpleStaticTableList.component"

    export default {
        name: "SimpleStaticChartTemplate",
        components: {SimpleStaticTableList},
        props: {
            title: {
                required: true,
                type: String
            },
            slotName: {
                required: true,
                type: String,
            }
        },
        data() {
            return {
                dataOptions: [{
                    value: '全部',
                    label: '全部'
                }, {
                    value: '2020年',
                    label: '2020年'
                }],
                selectValue: '全部'
            }
        },
        methods: {
            initBarChart() {
                let barChart = echarts.init(document.getElementById('bar-section'));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['机构数量', '商机数量', '合同数量', '日志数量', '任务数量'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '20%',
                            data: [10, 52, 200, 334, 390, 330, 220],
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        let colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B'];
                                        return colorList[params.dataIndex]
                                    }
                                },
                            },
                        }
                    ]
                };
                barChart.setOption(option);
            }
        },
        mounted() {
            this.initBarChart();
        }
    }
</script>

<style lang="scss">
    .static-table-content {
        .filter-section {
            height: 30px;
            line-height: 30px;
            margin: 0 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #dddddd;
            .title {
                font-weight: 600;
                margin-right: 10px;
            }
            .select {
                width: 100px;
            }
        }
        #bar-section {
            width: 100%;
            height: 250px;
        }
        .table-section {
            margin-left: 5%;
            margin-right: 8%;
        }
    }
</style>